﻿<%@page language="java" pageEncoding="UTF-8"%>
<%@ include file="../taglib.jsp"%>
<%@page import="mine.BD.utils.BDMonitor" %>
<%
	String lastUpdateTime = BDMonitor.getLastUpdateTime("item2");
	request.setAttribute("lastUpdateTime", lastUpdateTime);
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1400,user-scalable=0" />
<title>新入/离网用户</title>
<link href="css/excel_show.css" type="text/css" rel="stylesheet" />
<script>
var province = '${_user.province}';
var roleName = "${_user.roleName}";
var areaName = "${_user.area_name}";
</script>
</head>

<body class="body-bg">
<!---顶部导航--->
<div class="header">
     <div class="nav-con">
        <ul>
            <li class="current"><a style="color:yellow;" href="1-1.jsp">总体情况分析</a><em class="tab-trigle"></em></li>
	    <li ><a style="color:yellow;" href="2-1.jsp">用户结构变化</a></li>
	    <li ><a style="color:yellow;" href="3-1.jsp">用户ARPU变化</a></li>
	    <li class="last"><a style="color:yellow;" href="4-1.jsp">用户个人画像</a></li>
	</ul>
          </div>
    <div class="back-home-btn"><a href="../../home">返回首页</a></div>
</div>
<!---顶部导航 END--->
<div class="ex-container" id="ex-container">
<!---tab切换--->
    <div class="navTab">
        <div class="nav_menu">
            <ul>
               <li><a style="color:yellow;" href="1-1.jsp">出账用户</a></li>
                <li><a style="color:yellow;"  href="1-2.jsp">新入网用户</a></li>
                <li class="selected"><a style="color:yellow;"  href="1-3.jsp">新入/离网用户</a></li>
                <li><a style="color:yellow;" href="1-4.jsp">开机用户</a></li>
                <!-- <li><a style="color:yellow;" href="1-5.jsp">4G用户使用网络情况</a></li> -->
            </ul>
        </div>
        <div class="tab_box">
            <div>
  <!---分布图--->
  <div class="data-con">
      <div class="select-tools clearfix">
         <ul>
             <li>
                 <div class="sel-panel">
                     <span class="sel-name">网络类型</span>
                     <div class="mod-use-sel">
                         <div id="netType" class="sel-opt">3G</div>
                         <ol class="sel-list-con" style="display: none;">
                             <li><a href="#">2G</a> </li>
                             <li><a href="#">3G</a> </li>
                             <li><a href="#">4G</a> </li>
                         </ol>
                     </div>
                 </div>
             </li>
              <li>
                 <div class="sel-panel">
                     <span class="sel-name">月份</span>
                     <div class="mod-use-sel">
                         <div id="month" class="sel-opt">${lastUpdateTime}</div>
                     </div>
                 </div>
             </li>
             
             <li>
                 <div class="sel-panel">
                     <span class="sel-province" >省份</span>
                     <div class="mod-use-sel">
                         <div id="provinceName" class="sel-opt" >${_user.province}</div>
                         <ol class="sel-list-con provinceselect" ></ol>
                     </div>
                 </div>
             </li>
             <li>
                 <div class="sel-panel">
                     <span class="sel-name">地市</span>
                     <div class="mod-use-sel">
                       <div id="cityName" class="sel-opt">${_user.area_name}</div>
		                <ol class="sel-list-con cityselect"></ol>
                     </div>
                 </div>
             </li>
             <li>
             	<div class="sel-panel">
             		<!-- <span class="sel-name" id="Excel" style="cursor: pointer;">报表下载</span> -->
             		<span class="sel-name" onclick="BigData.notifyUpdate();" style="cursor: pointer;">查询</span>
             	</div>
             </li>
         </ul>
      </div>

      <!--图表区域-->
      <div class="chart_area">
          <div id="main" style="width:100%;height:100%;"></div>
      </div>
      <!--图表区域 END-->
  </div>
  <!---分布图 END--->
   </div>
        </div>
    </div>
    <!---tab切换--->
</div>
<!--弹框-->
<div class="pop-tips" id='tip' style="display:none;">
 <a href="javascript:void(0)" onclick="document.getElementById('tip').style.display = 'none'" class="btn-clo">关闭</a>
 <p>很抱歉地通知您，您需要的数据还在生成中，请稍候。</p>
</div>
<!--弹框 END-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/echarts-plain-map.js"></script>
<script src="js/My97DatePicker/WdatePicker.js"></script>
<script src="js/ex_auto.js"></script>
<script src="js/BigData.js" charset="gb2312"></script>
<script src='js/theme/part1.js' ></script>
<script src='js/provinceAndCity.js' charset="gb2312" ></script>
<script>
	function chartStyle(){
	   $(".ex-container").css("height", $(window).height()-50 + "px");
	   $(".ex-container .chart_area").css("width", $(window).width()-40 + "px");
	   $(".ex-container .chart_area").css("height", $(window).height()-157 + "px");
	}
	
	$(window).resize(function() {
		$(".ex-container").css("height", $(window).height()-50 + "px");
		$(".ex-container .chart_area").css("width", $(window).width()-40 + "px");
		$(".ex-container .chart_area").css("height", $(window).height()-157 + "px");
	});
	var json ; 
	$("#Excel").click(function(){
		var type='新入/离网用户';
		excel(type);
	  });
	function excel(type){
	   var jsonString = "";
	   jsonString = JSON.stringify(json);
	   window.location.href="../../ExcelExportServlet?json="+jsonString+"&type="+type;
	 }
	
	BigData.initialize = function(){
	   var option = BigData.bar_option2;
	   var legend1 =  ['新入网用户', '转4G','离网用户'];
	   var legend2 =  ['新入网用户','离网用户','转4G'];
	   option['grid']['x'] = 60;
	   option["yAxis"][0]["min"] = 0;
	   var series1  = [
	        {
	            name:'新入网用户',
	            type:'bar',
				'stack':'A',
				itemStyle: {       
	                normal: {
	                    color: '#00dc54',
						barBorderRadius: 3
	                 }
					 
				}
	            
	        },
			{
	            name:'转4G',
	            type:'bar',
				stack: 'A',
				itemStyle: {        
	                normal: {
	                    color: 'orange',
						barBorderRadius: 3
	                 }
				}
	            
	        },
			{
	            name:'离网用户',
	            type:'bar',
				itemStyle: {        
	                normal: {
	                    color: '#f73535',
						barBorderRadius: 3
	                 }
				}
	            
	        }
			
			
	    ];
	 
	  var I = BigData.cloneDeep(series1[0]), series2 = [];
	  delete I['stack'];
	  series2.push(I);
	  I = BigData.cloneDeep(series1[2]);
	  I['stack'] = 'A';
	  series2.push(I);
	  I = BigData.cloneDeep(series1[1]);
	  I['stack'] = 'A';
	  series2.push(I);
	  
	  function getMax(a, b, c){
		  var M = 0 , t = 0, size = a.length;
		  for(var i = 0; i < size; i++){
			  t = Math.max(parseInt(a[i]), parseInt(b[i]) + parseInt(c[i]));
			  M = Math.max(t, M);
		  }
		  return M;
		 
	  };
	  var F = function(t, C, S1, S2, S3){
		  		console.log("t="+t+",C="+C+",S1="+S1+",S2="+S2+",S3="+S3);
		  		
		        option['xAxis'][0].data = C, M = 0;
				if(t == '4G'){
					 option['series'] = series1;
					 option.series[1].data = S2;
				     option.series[2].data = S3;
					 M = getMax(S3, S1, S2);
					 option['legend']['data'] = legend1;
				}else{
					 option['series'] = series2;
					 option.series[1].data = S3;
				     option.series[2].data = S2;
					 M = getMax(S1, S2, S3);
					 option['legend']['data'] = legend2;
				}
			    option.series[0].data = S1;
		        var range = BigData.getRange(0, M, 10);
		        option["yAxis"][0]["max"] = range["high"];
		        option["title"]["text"] = "(单位:人)";
				if(!!BigData.chart){
				   BigData.chart.dispose();
				}
				BigData.chart = BigData.createChart("main", theme);
				BigData.chart.setOption(option);
	  };
	  
	  return F;
		
	};
	
	var placeData;
	BigData.notifyUpdate = (function(){
		function callback(rdata){
			json= rdata;
			
		    if(!BigData.hasData(rdata)){
				 $("#tip").show();
		        return;
		    }
		    
		    var  C = [], S1 = [], S2 = [], S3 = [], size = rdata.length, item, n, j = 0, t;
	        for(var i = 0; i < size; i++){
	         item = rdata[i];
			 n = item["item0"];
			// j = BigData.cities[n];
			
			 if(j == null){
				 continue;
			 }
			
			 C[i] = n[0] + '\n' + n[1];
		     S1[i] = item["item1"];
			 S2[i] = item["item2"] ;
		     S3[i] = item["item3"];
	        }
			t = BigData.params['param0'];
			C= BigData.compactArray(C);
		    S1 = BigData.compactArray(S1);
	        S2 = BigData.compactArray(S2);
	        S3 = BigData.compactArray(S3);
	        
			BigData.demoChart(t, C, S1, S2, S3);
		};
		
		return function(){
		    var params = BigData.params;
			params["param0"] = $.trim($("#netType").text());
			params["param1"] = BigData.formatDay($("#month").text());
			params["param2"] = $.trim($("#cityName").text());
			params["province"] = $.trim($("#provinceName").text());
		    BigData.Ajax("../../dataSource","JSON", params, true, callback);
		};
	})();
	
	function main(){
	   BigData.notifyUpdate();
	};
	BigData.params = {
		"type":2
	};
	chartStyle();
	BigData.demoChart = BigData.initialize();
	BigData.chart = echarts.init(document.getElementById('main'), theme);
	BigData.line_option.grid.height=$("#main").height()*0.7;
	BigData.initSelOpt();
	$("#month").click(function(){
	    WdatePicker({ 
	      dateFmt:'yyyy年MM月',
	      onpicked:function(dp){
		        $(this).text(dp.cal.getDateStr());
		  }})   
	});
	
	provinceAndCity();
	
	//main();

 
</script>
</body>
</html>
